<template>
	
	<div class="common-layout">
		 <el-container>
			<el-main class="hidden-xs-only">
				<span class="imgPosition">
					<img src="../../assets/img/logo.png" >
				</span>
				<br>
			 	<!-- <span class="leftTitle">
					微客计划，更专注于小微客户账务
				</span> -->
			</el-main>
			<el-aside  class="showAllWindow">
				<span class="rightLogo" style="text-align: center;display: block;" >
					<img src="../../assets/img/logo.png" style="text-align: center;" >
				</span>
				<br>
				<span class="tip">
					注册微客账号
					<router-link to="/login" style="text-decoration: none;color:rgb(70 103 172);">去登陆</router-link>
				</span>
				
				<!-- 表单 -->
				<div class="loginFrom">
					<el-form ref="formRef" :model="registerForm" >					    
						<el-form-item size="large" >
							<el-input 
							:suffix-icon="Calendar" 
							v-model="registerForm.userId" 
							class="input_"
							placeholder="请输入用户名(不超过10位数字)"
							oninput ="value=value.replace(/[^0-9.]/g,'')">					
							</el-input>
					    </el-form-item>
						
						<el-form-item size="large" >
							<el-input 
							show-password type="password" 
							v-model="registerForm.passWord"
							 placeholder="请输入密码"
							class="input_">								
							</el-input>
						</el-form-item>
						
						<el-form-item size="large" >
							<el-input 						
							v-model="registerForm.tel"
							 placeholder="请输入注册手机号"
							class="input_"
							oninput ="value=value.replace(/[^0-9.]/g,'')">								
							</el-input>
						</el-form-item>
						
						<span
						style="font-size: 0.75rem; display: block; text-align: center;margin-top:1.875rem;">
						注册即表示您已阅读并同意《用户协议》和《客户隐私》
						</span>

						<el-form-item class="input_2" >
							<!-- <el-button style="width: 9.5rem;margin-top: -10px;" 
							@click="onSubmit()" >注册</el-button>	 -->
							测试阶段暂不支持注册
					    </el-form-item>
					</el-form>
				</div>
				<div class="loginFooter">
					<span>
						 —— 更多注册方式 ——
					</span>
					<ul class="loginWay">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</el-aside>	
		</el-container>	
	</div>
	
</template>


<script lang="ts" setup>
import { reactive } from 'vue'
// import '../../assets/css/login_register.css'
// 图标
import { Calendar, Search,Edit } from '@element-plus/icons-vue'
import { register } from "../../http/login_register.js"
import router from '../../router/index.js'
import { ElMessage } from 'element-plus'
// do not use same name with ref
const registerForm = reactive({
  userId: '',
  passWord:"",
  tel:""
})

const onSubmit = () => {
	if(!registerForm.userId || !registerForm.passWord){
		ElMessage.error("请输入注册账户和密码")
		return
	}
	if(registerForm.userId.length>10){
		ElMessage.error("用户名小于等于10位")
		return
	}
	if(registerForm.passWord.length>16){
		ElMessage.error("密码不得超过16位")
		return
	}
	if(registerForm.tel.length!=11){
		ElMessage.error("请输入正确的手机号")
		return
	}	
	register(registerForm).then(res =>{
		console.log(res)
		if(res.data!=""){
			sessionStorage.setItem("access-admin",JSON.stringify(res.data))
			router.push("/settings")
			ElMessage.success("注册成功请尽快完成身份填写")
		}else{
			ElMessage.error("用户名已存在")
	  }
  })
}
</script>

<style type="text/css" scoped>
	
	*{
		margin: 0;
		padding: 0;	
	}	
	:deep(.loginFrom .el-form-item__content){
		margin-top: 0.8125rem;
		justify-content: center;
	}
	.common-layout{
		height: 100%;
	}
	.el-container{
		height: 100%;
	}
	.el-aside {
		background-color:white;  
		color: var(--el-text-color-primary);
		height: 100%;
		width:30.1rem;
	}
	
	.rightLogo img{
		width: auto;
		height: 120px;
		margin-top: 2.125rem;
	}
	@media screen and (max-width: 768px) {
		.el-aside {
		    width:100%;
			height: 100%;		
		}
		
	}
	.el-main {
		background-color: #e9eef3;
		background-image: url(../../assets/img/loginBkg.jpeg);
		background-repeat:no-repeat;
		background-size:cover;
		color: var(--el-text-color-primary);
		height:100%;
	}	
	.imgPosition{
		position: relative;
		top:3.8rem;
		left: 19rem;
	}
	.leftTitle{
		position: relative;
		top: 7rem;
		left: 3rem;
		width: 38rem;
		font-size: 4rem;	
		color:#293e74;
		font-family:"黑体"
	}
	.tip{
		display:block;
		text-align: center;
		font-weight: 700;
		margin-top: 10px;
	}
	.loginFrom{
		margin-top: 1.125rem;
		text-align: center;
		
	}
	.input_{
		width: 21rem;
		text-align: center;
	
	}
	.input_2{
		margin-top: 30px;
		text-align: center;
	}
	.loginFooter{
		text-align: center;
		margin-top:2rem;
		height: 1.25rem;
		font-weight: 100;
	}
	.loginWay{
		text-decoration: none;
		text-align: center;	
		height:3.75rem;

	}
	.loginWay li{
		display: inline-block;
		height: 3.75rem;
		line-height: 3.75rem;
		width: 3.75rem;
		margin-left:1.25rem;
		margin-top: 1.25rem;
	}
	.loginWay li:first-child{
		background: url(../../assets/img/qq.svg);
		background-repeat: no-repeat;
		background-size:cover;
		margin-left: 0rem;
	}
	.loginWay li:nth-child(2){
		background: url(../../assets/img/Wx.svg);
		background-repeat: no-repeat;
		background-size:cover;
	}
	.loginWay li:nth-child(3){
		background: url(../../assets/img/compriseWx.svg);
		background-repeat: no-repeat;
		background-size:cover;
	}
	.loginWay li:last-child{
		background: url(../../assets/img/dingtalk.svg);
		background-repeat: no-repeat;
		background-size:cover;
	}
</style>
